<template xmlns="http://www.w3.org/1999/html">
  <div style="padding: 10px">
    <el-page-header @back="goBack" :title="title" style="color: #4490f1">
      <template #content>
        <span class="text-large font-600 mr-3" size="small">
          {{ questionName }}
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          {{'内存限制:'+questionMemLimit+'kib'}} {{'时间限制:'+questionTimeLimit+'s'}}
        </span>
      </template>
      <div style="margin-right: 100px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-input autosize disabled placeholder="题目描述" style="margin-top: 10px"></el-input>
          <el-input disabled v-model="form.questionContent" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"/>
          <el-input autosize disabled placeholder="输入" style="margin-top: 10px"></el-input>
          <el-input disabled v-model="form.questionInput" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"/>
          <el-input autosize disabled placeholder="输出" style="margin-top: 10px"></el-input>
          <el-input disabled v-model="form.questionOutput" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"/>
          <el-input autosize disabled placeholder="样例输入" style="margin-top: 10px"></el-input>
          <el-input disabled v-model="form.questionSampleInput" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"/>
          <el-input autosize disabled placeholder="样例输出" style="margin-top: 10px"></el-input>
          <el-input disabled v-model="form.questionSampleOutput" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"/>
        </el-form>
      </div>
    </el-page-header>
    <el-row class="mb-4" style="margin-top: 10px">
      <el-button type="primary" @click="dialog">提交</el-button>
      <el-button type="success" @click="subRecords(this.questionId)">提交记录</el-button>
<!--      <el-button type="info">统计</el-button>-->
    </el-row>
    <el-dialog
        v-model="dialogVisible"
        title="Submit"
        width="50%">
      <el-form :model="form" label-width="120px" :size="'large'">
        <el-form-item label="语言">
          <el-select v-model="form.language_id"
                     class="m-2"
                     placeholder="请选择语言"
                     @change="$forceUpdate()"
                     size="large"
                     style="width: 180px">
            <el-option v-for="item in langList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"
                       :disabled="item.is_archived"/>
          </el-select>
        </el-form-item>
        <el-form-item label="代码">
          <!--          <el-input v-model="form.code" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="Please input"/>-->
          <el-input v-model="form.source_code" :autosize="{ minRows: 8, maxRows: 100 }" style="width: 90%;height: 90%"
                    type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>

import request from "@/utils/request";

export default {
  name: "ProblemDetailsView",
  props: ['questionId', 'langList'],
  data() {
    return {
      form: {},
      dialogVisible: false,
      questionId: {},
      questionName: {},
      questionMemLimit:{},
      questionTimeLimit:{},
      title: "返回",
      reqData: {},
      langList: [{id: '0', name: '获取语言失败'}]
    }
  },
  created() {
    this.questionId = this.$route.query.qid;
    this.load(this.questionId);
    this.getLangList();
    this.form.Qid = this.questionId;
  },
  methods: {
    goBack() {
      this.$router.push('/problem')
    },
    load(id) {
      request.get("/subject/" + id).then(res => {
        this.questionName = res.data.questionName
        this.questionMemLimit = res.data.questionMemLimit
        this.questionTimeLimit = res.data.questionTimeLimit
        this.form = res.data
        console.log("res", res.data)
      })
    },
    dialog() {
      this.dialogVisible = true
      //this.form = {}
    },
    subRecords(questionId){
      this.$router.push({path: '/problemSubRecords', query: {qid: questionId}});
    },
    submit() {
      this.form.Qid = this.questionId;
      request.post("/subject/submit", this.form).then(res => {
        if (res.code === '0') {
          console.log(res);
          this.$message({
            type: "success",
            message: "提交成功"
          })
        } else {
          this.$message({
            type: "error",
            message: res.message
          })
        }
        this.dialogVisible = false
      })
    },
    getLangList() {
      request.get("/subject/getLangList").then(res => {
        this.langList = res.data;
      })
    }
  }
}

</script>

<style scoped>

</style>